<template>
	<view class="staff">
		<base-navbar back-color="#fff">
			<template #default>
				<view class="nav-search">
					<uni-search-bar v-model="keyword" placeholder="请输入店员姓名或手机号" cancel-button="" radius="32"
						@keydown.enter="searchStaff"></uni-search-bar>
				</view>
			</template>
		</base-navbar>
		<view class="card-list">
			<view class="card" v-for="(item, index) in staffList" :key="index">
				<view>
					<view class="user">
						<text class="name">{{item.name}}</text>
						<text class="phone">{{item.mobile}}</text>
					</view>
				</view>
				<view class="other">
					<view class="actions">
						<view class="item" @click="pageRoute('/pages/merchant/staff/form?id=' + item.id)">
							<uni-icons type="compose" size="24" color="#909193"></uni-icons>
							<text class="label">编辑</text>
						</view>
						<view class="item" @click.stop="deleteHandle(item.id)">
							<uni-icons type="trash" size="24" color="#909193"></uni-icons>
							<text class="label">删除</text>
						</view>
					</view>
				</view>
			</view>
			<c-button :style="{'background':themeColor.theme,'color':'#fff'}" round size="medium" block
				@click="pageRoute('/pages/merchant/staff/form')">+添加店员</c-button>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		keyword: '',
		staffList: [],
		isMore: false,
	});

	onLoad((opt) => {});

	onShow(() => {
		//登录过期自动登录
		console.log('登录状态', checkLogin());
		if (!checkLogin()) {
			pageRoute('/pages/users/login/login');
		} else {
			getList();
		}
	});

	function searchStaff() {
		state.staffList = [];
		getList();
	}

	function getList() {
		request.get('staff/list', {
			keyword: state.keyword,
			skip: state.staffList.length,
			limit: 10,
		}).then(res => {
			console.log('员工列表', res);
			if (res.code === 1) {
				state.isMore = res.data.is_more;
				if (state.staffList.length <= 0) {
					state.staffList = res.data.data;
				} else {
					state.staffList = state.staffList.concat(res.data.data);
				}
			}
		})
	}

	function deleteHandle(id) {
		request.delete('staff/delete', {
			id: id,
		}).then(res => {
			uni.showToast({
				title: res.msg,
				duration: 2000
			})
			getList();
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url: url
		});
	}

	const {
		themeColor,
		keyword,
		staffList,
		isMore,
	} = toRefs(state);
</script>

<style lang="scss">
	.staff {
		padding: $margin-24 $margin-24;
		box-sizing: border-box;

		.nav-search {
			@include f-center;
			width: 100%;

			:deep(.uni-searchbar) {
				width: 100%;
				padding: 0;
			}
		}

		.card-list {
			min-height: 91vh;
			padding: $margin-24;
			background-color: $bg-inverse-color;
			border-radius: $radius-16;
			box-sizing: border-box;

			.card {
				padding: $margin-24;
				box-sizing: border-box;
				border-bottom: 1rpx solid mix($white-color, $border-color, 35%);

				&:last-of-type {
					border-bottom: none;
				}

				.user {
					display: flex;
					align-items: center;
					padding: $margin-24 0;

					.name {
						font-size: $font-32;
						color: $main-color;
					}

					.phone {
						margin-left: $margin-12;
					}
				}

				.area {
					padding: $margin-4 0;
					font-size: $font-24;
					color: $tips-color;
				}

				.other {
					@include f-between;
					padding: $margin-24 0;

					.actions,
					.actions .item {
						@include f-center;
					}

					.actions .item {
						margin-left: $margin-20;
					}

					.label {
						margin-left: $margin-4;
						font-size: $font-24;
					}
				}
			}

			.c-button {
				margin-top: $margin-32;
			}
		}
	}
</style>